<template>
    <div class="DoubleCircleRipple">
        <cesium-viewer @viewerAlready="viewerAlready">
        </cesium-viewer>
    </div>
</template>

<script>
    import CesiumViewer from "../../CesiumViewer";
    import {addDoubleCircleRipple} from "../../../utils/DoubleCircleRipple";
    const redCircle = require("../../../assets/images/redCircle2.png");
    const pld = require("../../../assets/images/tubiao/pld.png");
    export default {
        name: "DoubleCircleRipple",
        //import引入的组件需要注入到对象中才能使用",
        components: {CesiumViewer},
        data() {
            //这里存放数据",
            return {};
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            viewerAlready(){
                //飞行到这个位子
                window.viewer.camera.flyTo({
                    destination : Cesium.Cartesian3.fromDegrees(117.217124,31.770777, 15000.0),
                    orientation: {
                        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north) //东西南北朝向
                        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)  //俯视仰视视觉
                        roll : 0.0                             // default value
                    },
                    duration:3//3秒到达战场
                });
                addDoubleCircleRipple({
                    id: ['1','2'],
                    lon:117.217124,
                    lat:31.809777,
                    height:0,
                    maxR:4000,
                    minR:0,//最好为0
                    deviationR:20,//差值 差值也大 速度越快
                    eachInterval:2000,//两个圈的时间间隔
                    image:redCircle
                });
                addDoubleCircleRipple({
                    id: ['3','4'],
                    lon:117.217124,
                    lat:31.729777,
                    height:0,
                    maxR:1000,
                    minR:0,//最好为0
                    deviationR:6,//差值 差值也大 速度越快
                    eachInterval:2000,//两个圈的时间间隔
                    image:redCircle
                });
                //添加billboard
                window.viewer.entities.add({
                    name:"",
                    position: Cesium.Cartesian3.fromDegrees(117.217124, 31.729777),
                    billboard: {
                        image: pld, // default: undefined
                        // sizeInMeters: true,//该属性指定此广告牌的大小是否以米为单位,即随视角高度改变billboard在屏幕上的大小
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM // default: CENTER
                    }
                });
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style>

</style>

